<template>
  <h1>{{person.name}}</h1>
  <h1>{{person.age}}</h1>
  <h1>{{person.job.type}}</h1>
  <h1>{{person.job.salary}}</h1>
  <h1>{{person.hobby}}</h1>
  <h1 v-show="person.sex">{{person.sex}}</h1>
  <button @click="say">say</button>
  <button @click="addSex">addSex</button>
  <button @click="deleteSex">deleteSex</button>
</template>

<script>
  import {reactive} from 'vue'
  export default {
    name: 'App',
    // 需要显式的接受传入的对象
    props:[],
    // 需要显式的接受传入的方法
    // 如果该标签上传入了一个事件@hello=
    emits:['hello'],
    // setup会传入props对象和context对象
    // props是从外面的标签里面传入的参数值
    // context是上下文
    setup(props,context){
      // props是接受的参数
      console.log(props)
      // context的attrs属性和props是互斥的
      console.log(context.attrs)
      // emit是触发自定义事件函数
      context.emit("hello",666)
      // 传入的标签的内容，在外面用
      // <template v-slot:qweqwerqwerq ><span>test56666666666</span></template>
      // 来传入
      console.log(context.slots)
      let person = reactive({
        name:"zhangsan",
        age:18,
      })
      return {
        person
      }
    },
  }
</script>
